<template>
  <a-modal
    class="add-org-dialog"
    v-model:visible="dataWrapper.visiable"
    title="编辑素材信息"
    @ok="handleOk"
    @cancel="cancel"
  >
    <a-form
      :model="dataWrapper.formData"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item has-feedback label="标题" v-bind="validateInfos.title">
        <a-input
          v-model:value="dataWrapper.formData.title"
          placeholder="请输入素材标题"
        />
      </a-form-item>
      <a-form-item has-feedback label="描述" v-bind="validateInfos.description">
        <a-textarea
          v-model:value="dataWrapper.formData.description"
          placeholder="请输入素材描述"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </a-form-item>

      <a-form-item
        has-feedback
        label="绑定分类"
        v-bind="validateInfos.categories"
      >
        <a-tree-select
          style="width: 100%"
          placeholder="选择绑定分类"
          tree-node-filter-prop="title"
          :show-checked-strategy="TreeSelect.SHOW_ALL"
          v-model:value="dataWrapper.formData.categories"
          :tree-data="dataWrapper.classifyTreeData"
          :replace-fields="{
            children: 'childCateGoryList',
            title: 'name',
            key: 'id',
            value: 'id',
          }"
          tree-checkable
          allow-clear
          tree-check-strictly
        />
      </a-form-item>
      <a-row v-if="dataWrapper.quickAddTagVisiable" style="margin-bottom: 8px">
        <a-col :span="5"></a-col>
        <a-col :span="16">
          <a-space>
            <a-input
              ref="quickTagRef"
              size="small"
              v-model:value="dataWrapper.addTagValue"
              placeholder="请输入添加的标签名"
            />
            <a-button
              size="small"
              type="primary"
              @click="emits('confirmQuickAddTag')"
            >
              确认添加
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-form-item has-feedback label="标签" v-bind="validateInfos.description">
        <a-select
          v-model:value="dataWrapper.formData.tags"
          mode="multiple"
          placeholder="请选择图片标签"
          style="width: 100%"
          :filter-option="false"
          :options="dataWrapper.tagList"
          @search="(value) => emits('searchTag', value)"
        >
          <template #notFoundContent>
            <a-spin size="small" v-if="searchTagLoading" />
            <a-empty
              v-else
              description="Sorry, 未搜索到相关标签，请输入关键字搜索"
            >
              <a-button type="primary" @click="openAddTag"> 现在创建 </a-button>
            </a-empty>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item
        has-feedback
        label="构图方式"
        v-bind="validateInfos.structure"
      >
        <a-select
          disabled
          v-model:value="dataWrapper.formData.structure"
          placeholder="请选择构图方式"
        >
          <a-select-option :value="MaterialStucture.UNKNOW">
            未知
          </a-select-option>
          <a-select-option :value="MaterialStucture.HORIZONTAL">
            横图
          </a-select-option>
          <a-select-option :value="MaterialStucture.VERTICAL">
            竖图
          </a-select-option>
          <a-select-option :value="MaterialStucture.SQUARE">
            方图
          </a-select-option>
          <a-select-option :value="MaterialStucture.PANORAMA">
            全景图
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item has-feedback label="一级类型" v-bind="validateInfos.type">
        <a-select
          v-model:value="dataWrapper.formData.type"
          placeholder="请选择一级类型"
        >
          <a-select-option :value="MaterialType.IMAGE"> 图片 </a-select-option>
          <a-select-option :value="MaterialType.VIDEO"> 视频 </a-select-option>
          <a-select-option :value="MaterialType.MUSIC"> 音乐 </a-select-option>
          <a-select-option :value="MaterialType.FONT"> 字体 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item has-feedback label="二级类型" v-bind="validateInfos.itype">
        <a-select
          v-model:value="dataWrapper.formData.itype"
          placeholder="请选择二级类型"
        >
          <a-select-option :value="MaterialSecType.NONE"> 无 </a-select-option>
          <a-select-option :value="MaterialSecType.PHOTOGRAPHY">
            摄影图
          </a-select-option>
          <a-select-option :value="MaterialSecType.AVOID_CUTOUT">
            免抠
          </a-select-option>
          <a-select-option :value="MaterialSecType.VECTORGRAPH">
            设计矢量图
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item has-feedback label="素材用途" v-bind="validateInfos.usage">
        <a-select
          v-model:value="dataWrapper.formData.usage"
          placeholder="请选择素材用途"
        >
          <a-select-option :value="MaterialUsage.BUSINESS">
            商业
          </a-select-option>
          <a-select-option :value="MaterialUsage.MEDIA"> 传媒 </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { TreeSelect } from 'ant-design-vue'
import { ValidationRule } from 'ant-design-vue/lib/form/Form'
import { Form } from 'ant-design-vue'
import { Ref, ref } from 'vue'
import {
  MaterialSecType,
  MaterialStucture,
  MaterialType,
  MaterialUsage,
} from '@/components/ItemList/MaterialList/types'
import type { EditMatInfoDiaForm, EditMatInfoDiaState } from '../types'
const { useForm } = Form

const props = withDefaults(
  defineProps<{
    dataWrapper: EditMatInfoDiaState
    searchTagLoading?: boolean
    quickAddTagLoading?: boolean
  }>(),
  {
    searchTagLoading: false,
    quickAddTagLoading: false,
  }
)

const emits = defineEmits<{
  (e: 'enter'): void
  /** 搜索标签回调 */
  (e: 'searchTag', searchValue: string): void
  /** 打开快速添加标签input回调 */
  (e: 'openQuickAddTag', ref: Ref): void
  /** 确认快速添加标签 */
  (e: 'confirmQuickAddTag'): void
}>()

const quickTagRef = ref()

const rules = ref<Record<keyof EditMatInfoDiaForm, ValidationRule[]>>({
  // name: [{ required: true, message: '分类名称必填', trigger: 'blur' }],
  title: [],
  description: [],
  tags: [],
  type: [],
  itype: [],
  usage: [],
  structure: [],
  categories: [],
})

const { validate, validateInfos, resetFields } = useForm(
  props.dataWrapper.formData,
  rules
)

const handleOk = () => {
  validate()
    .then(() => {
      emits('enter')
    })
    .catch((err) => {
      console.error(err.errorFields[0].errors[0])
    })
}

const cancel = () => {
  resetFields()
}

const openAddTag = () => {
  emits('openQuickAddTag', quickTagRef)
}
</script>

<style lang="scss" scoped>
@include b(add-org-dialog) {
}
</style>
